<template>
  <!--登录-->
  <div class="wrap">
    <div class="tdbModule loginPage">
      <div class="registerTitle">用户登录</div>
      <div class="registerCont">
        <ul>
          <li>
            <span class="dis"></span>
            <input v-model="userInfo.userType" type="radio" value="1" />
            投资人
            <input v-model="userInfo.userType" type="radio" value="2" />
            借款人
          </li>
          <li>
            <span class="dis">手机号：</span>
            <input class="input" v-model="userInfo.mobile" />
          </li>

          <li>
            <span class="dis">密码：</span>
            <input class="input" v-model="userInfo.password" type="password" />
          </li>
          <li class="btn">
            <button @click="login()" :class="{ disabled: !isValid }">
              立即登录
            </button>
          </li>
        </ul>
        <!-- 更多登录方式 -->
        <div class="more-sign">
          <h6>社交帐号登录</h6>
          <ul>
            <li>
              <a id="weixin" class="weixin" :href="wxLoginPath"
                ><i class="iconfont icon-weixin"
              /></a>
            </li>
            <li>
              <a id="qq" class="qq" target="_blank" href="#"
                ><i class="iconfont icon-qq"
              /></a>
            </li>
          </ul>
        </div>
      </div>
    </div>


    
  </div>
</template>

<script>
import "~/assets/css/register.css";
import cookie from "js-cookie";

export default {
  data() {
    return {
      // 获取wx二维码服务器地址 必须和 回调接口 服务器地址一样
      //否则两次请求不能使用同一个会话域
      wxLoginPath: "http://localhost:8160/api/wx/login",
      userInfo: {
        userType: 1,
      },
      isValid: true, //表单校验是否成功
    };
  },

  methods: {
    //登录
    login() {
      this.$axios.$post("/api/core/userInfo/login", this.userInfo).then((r) => {
        console.log(r.data.token);
        //缓存token分享给其他页面使用: cookie/localStorage
        //cookie: 缓存数据可以设置过期时间和作用域、请求访问后端时 会自动携带满足要求的cookie访问
        //localStorage: 缓存的数据不能设置过期时间 需要手动删除、访问后端接口时 需要手动配置才会携带参数
        localStorage.setItem("SRB-TOKEN", r.data.token);

        this.$message.success("登录成功");
        //window.location 整个页面刷新 AppHeader的vue生命周期方法会重新执行
        window.location = "/";
        //登录成功跳转到首页页面 回显登录成功个人信息
        //this.$router.push("/"); //首页使用token 访问后端服务器可以查询到id对应用户的个人信息
      });
    },
  },
};
</script>
<style>
.more-sign {
  margin-top: 20px;
  margin-left: 300px;
}

.more-sign h6 {
  position: relative;
  margin: 0 0 10px;
  font-size: 12px;
  color: #b5b5b5;
}

.more-sign h6:after,
.more-sign h6:before {
  content: "";
  border-top: 1px solid #b5b5b5;
  display: block;
  position: absolute;
  width: 60px;
  top: 5px;
}
.more-sign h6:before {
  left: 35px;
}

.more-sign h6:after {
  right: 30px;
}
.more-sign h6:after,
.more-sign h6:before {
  content: "";
  border-top: 1px solid #b5b5b5;
  display: block;
  position: absolute;
  width: 60px;
  top: 5px;
}

.more-sign ul {
  margin-bottom: 10px;
  list-style: none;
  padding-left: 0;
}

.more-sign ul li {
  margin: 0 5px;
  display: inline-block;
}

.more-sign ul a {
  width: 50px;
  height: 50px;
  line-height: 50px;
  display: block;
}
.more-sign .icon-weixin {
  color: #00bb29;
}
.more-sign .icon-qq {
  color: #498ad5;
}
.more-sign ul i {
  font-size: 28px;
}
.ic-wechat:before {
  content: "\E604";
}
.ic-qq_connect:before {
  content: "\E603";
}
</style>
